<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据联动</title>
</head>

<body>

  <div id="app">
    <div>
      省份：
      <!-- 
        v-model是对data中的数据进行双向绑定
        界面和js数据变化都会同步给对方
        一般都是和表单元素绑定
        @事件名称="methods里面定义的方法"
        是将事件和对应的方法关联
        等同于addEventListener的方法功能
      -->
      <select v-model="pid" @change="queryCity()">
        <!-- 
          v-for="循环的变量名 in 数组"
          可以将所在的元素进行循环生成
          属性的注入要加:在属性的前面
          {{ data或者循环生成的变量 }}是输出变量的内容到所在位置
        -->
        <option v-for="d in plist" :value="d.pid">
          {{ d.province }}
        </option>
      </select>
      城市：
      <select v-model="cid">
        <option v-for="d in clist" :value="d.cid">
          {{ d.city }}
        </option>
      </select>

      <hr>
      <button onclick="alert('缓存清除完毕')">清除浏览器缓存</button>

      <div v-if="loading">数据加载中，请稍候。。。</div>

      <table v-if="!loading" border="1">

        <thead>
          <tr>
            <th>编号</th>
            <th>城市名</th>
            <th>信息修改时间</th>
          </tr>
        </thead>

        <tbody>

          <tr v-for="d in clist">
            <td>{{ d.cid }}</td>
            <td>{{ d.city }}</td>
            <td>{{ tools.formatDate(d.lastupdate) }}</td>
          </tr>

        </tbody>

      </table>

    </div>


    <div>
      <!-- {{ plist }}
      <br> -->
      {{ pid }}
      <!-- <br>
      {{ clist }} -->
      <br>
      {{ cid }}
    </div>




  </div>



  <script src="./js/linkinfo.js" type="module"></script>

</body>

</html>